<template>
  <div class="type-main">
    <div class="flex gap-2" style="width: 70%">
      <div style="margin-bottom: 10px; display: flex">
        <el-input
          placeholder="请输入名称(支持批量加入，需要以英文逗号分隔)"
          v-model="addName"
          prefix-icon="Sunset"
          size="small"
          style="margin-right: 10px; width: 300px"
        ></el-input>
        <el-button icon="Pointer" @click="addType" size="small" type="primary">添加</el-button>
      </div>
      <div class="wraning-text" v-show="isShwoText">
        <span>{{ warningText }}</span>
      </div>
      <div>
        <el-tag
          type="primary"
          effect="plain"
          v-for="item of props.dataList"
          :key="item.id"
          :class="{ active: item.id === tag.id || batchId.indexOf(item.id) != -1 }"
          @click="chooseTag(item)"
        >
          {{ item.name }}
        </el-tag>
      </div>
    </div>

    <div
      class="word-area"
      style="flex: 1; padding-left: 10px; max-height: 480px; overflow-y: scroll"
    >
      <div class="btn-group">
        <el-button
          size="small"
          :type="batchDeleteStatus === 1 ? 'danger' : 'primary'"
          @click="batchDelete(batchDeleteStatus)"
          >{{ batchDeleteStatus === 1 ? '批量删除' : '确定' }}</el-button
        >
        <el-button @click="cancel(1)" v-show="batchDeleteBtn" size="small">取消</el-button>
      </div>
      <div class="btn-group">
        <el-button
          size="small"
          :type="batchUpdateStatus === 1 ? 'success' : 'primary'"
          @click="batchUpdate(batchUpdateStatus)"
          >{{ batchUpdateStatus === 1 ? '批量修改' : '确定' }}</el-button
        >
        <el-button @click="cancel(0)" v-show="batchUpdateBtn" size="small">取消</el-button>
        <el-input
          class="inp"
          v-model="batchName"
          maxlength="20000"
          style="width: 280px"
          placeholder="注意，批量修改，多个分类名称使用英文 “,” 连接，如果选择的分类个数少于填入的名称数量，那么就无法修改成功"
          show-word-limit
          type="textarea"
          :autosize="{ minRows: 7 }"
        />
      </div>
      <div class="btn-group">
        <el-button size="small" type="danger" @click="remove">删除</el-button>
      </div>
      <div class="btn-group">
        <el-button size="small" type="success" @click="update">修改</el-button>
        <el-input class="inp" v-model="tag.name" placeholder="请输入修改名称"></el-input>
      </div>
    </div>
  </div>
</template>

<script setup>
import request from '@/util/request'
import { ElMessage } from 'element-plus'
import { reactive, ref, watch } from 'vue'

const props = defineProps({
  dataList: {
    type: Array,
    default: null
  },
  type: {
    type: Object,
    default: null
  }
})

const addName = ref('')

const localData = reactive(props.dataList)

const emits = defineEmits(['hangdler-delete', 'handler-update', 'update', 'remove', 'add-item'])

// 警告条
const warningText = ref('')
const isShwoText = ref(false)

// 当前批量修改按钮的状态
const batchUpdateStatus = ref(1)
// 当前批量删除的按钮
const batchDeleteStatus = ref(1)
// 当前是否是批量操作状态
const batch = ref(false)

// 显示批量修改的cancel按钮
const batchUpdateBtn = ref(false)
const batchDeleteBtn = ref(false)

// 判断当前状态是批量删除还是批量修改:0-都不是，1-批修，2-批删
const isStatus = ref(0)

// 批量选择的id
const batchId = ref([])
// 批量修改传递的修改值
const batchName = ref([])
// 单个id
const tag = ref({
  id: null,
  name: ''
})
// 单个操作
const chooseTag = (item) => {
  if (batch.value) {
    console.log('加入的数据', item)

    if (batchId.value.indexOf(item.id) === -1) {
      batchId.value.push(item.id)
      batchName.value.push(item.name)
      console.log('加入', batchId.value, batchName.value)
    } else {
      batchId.value.splice(batchId.value.indexOf(item.id), 1)
      batchName.value.splice(batchName.value.indexOf(item.name), 1)
      console.log('删除', batchId.value, batchName.value)
    }
  } else {
    tag.value.id = item.id
    tag.value.name = item.name
    console.log('选择了', tag.value)
  }
}

const cancel = (stu) => {
  if (stu === 0) {
    // 取消批量修改
    batchUpdateBtn.value = false
    batchUpdateStatus.value = 1
  } else if (stu === 1) {
    // 取消批量删除
    batchDeleteBtn.value = false
    batchDeleteStatus.value = 1
  }
  warningText.value = ''
  isShwoText.value = false
  isStatus.value = 0
  batch.value = false

  batchId.value = []
  batchName.value = []
}
// 执行批量修改
const batchUpdate = (item) => {
  if (isStatus.value === 2) {
    ElMessage.warning('抱歉，当前处于批量修改状态，请取消之后再尝试')
    return
  }
  warningText.value = '批量修改中'
  batch.value = true
  isShwoText.value = true
  isStatus.value = 1

  tag.value = {
    id: null,
    name: ''
  }

  if (batchUpdateStatus.value === 1) {
    // 说明需要进行批量删除
    batchUpdateStatus.value = 2
    batchUpdateBtn.value = true
  }
  if (item === 2) {
    console.log('执行了2')
    emits('handler-update',{type:'handler-update',data:{value1:batchId,value2:batchName}})
  }
}

// 执行批量删除
const batchDelete = (item) => {
  if (isStatus.value === 1) {
    ElMessage.warning('抱歉，当前处于批量删除状态，请取消之后再尝试')
    return
  }
  isStatus.value = 2
  batch.value = true
  warningText.value = '批量删除中'
  isShwoText.value = true

  tag.value = {
    id: null,
    name: ''
  }
  if (batchDeleteStatus.value === 1) {
    // 说明需要进行批量删除
    batchDeleteStatus.value = 2
    batchDeleteBtn.value = true
  }

  if (item === 2) {
    console.log('执行了1')
    emits('hangdler-delete', { type: 'hangdler-delete', data: { value1: batchId } })
  }
}

// 单个修改删除
const remove = () => {
  console.log('', tag.value)
  emits('remove', { type: 'remove', data: { value1: tag.value } })
}

const update = () => {
  console.log('update--', tag.value, null)
  emits('update', { type: 'update', data: { value1: tag.value, value2: null } })
}
console.log('-----------------》', localData.value)

const addType = () => {
  emits('add-item', { type: 'add-item', data: addName.value })
}

watch(
  () => localData.value,
  (oldData, newData) => {
    // 取消批量修改
    batchUpdateBtn.value = false
    batchUpdateStatus.value = 1

    // 取消批量删除
    batchDeleteBtn.value = false
    batchDeleteStatus.value = 1
    warningText.value = ''
    isShwoText.value = false
    isStatus.value = 0
    batch.value = false

    batchId.value = []
    batchName.value = []
    console.log('执行了-------------------------', oldData, newData)
  }
)
</script>

<style scoped>
.type-main {
  width: 95%;
  min-height: 200px;
  background: #fff;
  margin: 10px 15px 10px 15px;
  padding: 10px;
  border-radius: 10px;
  overflow-x: hidden;
  display: flex;
  max-height: 500px;
  overflow-y: hidden;
}

.el-tag {
  margin-right: 5px;
  margin-bottom: 10px;
}

.el-tag:hover {
  background: #ffe3e3;
  cursor: pointer;
}

.flex {
  max-height: 480px;
  overflow-y: scroll;
}

.btn-group {
  margin-bottom: 30px;
}

.word-area::-webkit-scrollbar {
  display: none;
}

.inp {
  margin-top: 10px;
}

.wraning-text {
  width: 95%;
  border-left: 3px #ff6a00 solid;
  padding: 5px;
  margin-bottom: 10px;
  background-image: linear-gradient(to right, #fbe2c2, #fff);
  color: #fff;
}

.active {
  background: #74c3ff;
  color: #fff;
}
</style>
